<template>
	<div id='froms'>
		<div v-if="hied.status" id="tc">
			{{hied.con}}
		</div>

		<ul>
			<li style="cursor:pointer" v-for="(item,index) in lis" :key="index" :style="{backgroundColor:type==item.value?'#FBC096':''}" @click="sorts(item.value)">{{item.label}}</li>
		</ul>
		<textarea class='txt' v-model="message" rows="3" Placeholder='在这里输出你想知道的问题，我们将尽快与您联系'></textarea>
		<div class="inputs">
			<input type="text" name='name' Placeholder='姓名' v-model="name" /><input type="text" name='phone' Placeholder='手机' v-model="phone" />

		</div>
		<el-button class="tj cursorClick"  @click='tj' :loading="ButStatus">提交</el-button>
		<!-- <button class="tj" @click='tj'> 提交 </button> -->

	</div>
</template>

<script>
	import axios from 'axios'
	import { Message } from "element-ui"
	import config from "./config.json"
	export default {
		name: "froms",
		data() {
			return {
				lis: [{
						value: '10',
						label: '加盟费用'
					},
					{
						value: '20',
						label: '项目优势'
					},
					{
						value: '30',
						label: '投资回报'
					},
					{
						value: '40',
						label: '了解企业'
					},
					{
						value: '50',
						label: '项目支持'
					},
					{
						value: '60',
						label: '开店预算'
					}
				],
				type: '10',
				name: '',
				message: '',
				phone: '',
				phonetf: false,
				hied: {
					status: false,
					con: ''
				},
				ButStatus: false

			}
		},
		methods: {
			sorts(ite) {
				this.type = ite
			},
			tj() {
				var thiss = this

				var myreg = /^[1][0-9]{10}$/;

				if(this.name == '' || this.phone == '') {
					Message.warning('姓名或联系方式不能为空')
				} else if(!myreg.test(this.phone)) {
					Message.warning('手机格式错误')
				} else {
					// console.log(window.location.href, "window.location.href")
					thiss.hied.status = true
					thiss.hied.con = '正在提交。。。'
					this.ButStatus=true
					axios.post(`${config.host}/unauth/add`, {
							type: this.type,
							name: this.name,
							message: this.message,
							phone: this.phone,
							domainName: decodeURIComponent(window.location.href)
						})
						.then(function(response) {
					        thiss.ButStatus=false
							if(response.data.success == true) {
								thiss.hied.con = '提交成功'
								setTimeout(() => {
									thiss.hied.status = false
								}, 1000)
							} else {
								thiss.hied.con = '提交失败,请重试'
								setTimeout(() => {
									thiss.hied.status = false
								}, 1000)

							}
						}).catch(function(error) {
					        thiss.ButStatus = false;
							thiss.hied.con = '提交失败，请重试'
							setTimeout(() => {
								thiss.hied = false
							}, 1000)
							console.log(error);
						});

				}

			}
		}
	}
</script>

<style lang='scss' scoped>
	input {
		font-size: 14px;
		font-family: SourceHanSansCN-Light;
		color: #312D26;
		line-height: 43px;
	}
	#tc {
		width: 200px;
		height: 100px;
		background: rgba(0, 0, 0, 0.8);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		line-height: 100px;
		color: #fff;
		border-radius: 20px;
		text-align: center;
	}
	
	#froms {
		position: relative;
		background-color: #fff;
		padding: 23px 0;
		border: 1px solid #C1BFB9;
		width: 717px;
		height: 360px;
		margin: 0 auto;
	.el-button:focus, .el-button:hover{
		color: #555451;
	}
		ul {
			color: #555451;
			li {
				width: 156px;
				height: 40px;
				float: left;
				background-color: #F7855A;
				line-height: 40px;
				text-align: center;
				margin: 0 40px 12px;
				border-radius: 5px;
				font-weight: bold;
			}
		}
		.txt {
			width: 626px;
			height: 91px;
			margin: 0 40px;
			/*text-align: center;*/
		}
		.txt::input-placeholder {
			text-align: center;
		}
		.inputs {
			padding: 15px 0;
			input:nth-child(1) {
				margin-left: 40px;
			}
			input {
				border: 1px solid #C1BFB9;
				width: 308px;
				height: 42px;
				margin-right: 12px;
				line-height: 40px;
				text-align: center;
			}
		}
		.tj {
			width: 626px;
			height: 40px;
			background-color: #F7855A;
			margin-left: 40px;
			border-radius: 5px;
		}
	}
</style>